<script setup lang='ts'>
import { reactive } from 'vue';
import { Search, More, Edit, Delete, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import UploadModel from '../componentmodel/UploadModel.vue'
import baseAPI from '../../utils/api';
import { uploadStore } from '../../stores/uploadDialog';
// 定义数据
const formData = reactive({
    tableData: [
        {
            name: '', sex: true, birthday: '', IDCard: '',
            nation: '', political_climate: '', address: ''
        }
    ],
    sereach: '',
    dialogView: false,
    showAddEdit: false
})
const dialogData = reactive({
    base: {
        id: '',
        name: '',
        sex: true,
        birthday: '',
        IDcard: '',
        nation: '',
        political_climate: '',
        address: ''
    },
    baseTem: {
        id: '',
        name: '',
        sex: true,
        birthday: '',
        IDcard: '',
        nation: '',
        political_climate: '',
        address: ''
    },
    nationOptions: [{ label: '', value: '' }],
    politicalOptions: [{ label: '', value: '' }],
    expend: { id: '', name: '', recogntion_date: '', participate_date: '', hometown: '', employment_type: '' },
    expendTem: { id: '', name: '', recogntion_date: '', participate_date: '', hometown: '', employment_type: '' },
    employmentOptions: [{ label: '在职在编', value: '在职在编' },
    { label: '在职不在编', value: '在职不在编' }]
})
const uploaddialog = uploadStore()
// 业务函数
// 删除
const delItem = async (row: any) => {
    await baseAPI.teacherBaseAPI.del(row.id)
    ElMessage.error('你删除的数据已成功！')
    getAllData()
}
// 添加教师基本信息
const addItem = () => {
    dialogData.base = dialogData.baseTem
    formData.showAddEdit = true
    formData.dialogView = true

}
const addData = async () => {
    // expend判断
    const teBase = await baseAPI.teacherBaseAPI.add(dialogData.base)
    dialogData.expend.name = teBase.data.id

    await baseAPI.teacherExpendAPI.add(dialogData.expend)
    dialogData.base = dialogData.baseTem
    dialogData.expend = dialogData.expendTem
    getAllData()
    formData.dialogView = false
    ElMessage({
        message: '数据增加成功！',
        type: 'success'
    })
}

// 修改数据
const editItem = async (row: any) => {
    dialogData.base = row
    let params = {
        name: row.id
    }
    const teExpend = await baseAPI.teacherExpendAPI.getAll(params)
    if (teExpend.data.length > 0) {
        dialogData.expend = teExpend.data[0]
    }
    formData.showAddEdit = false
    formData.dialogView = true
}
const editData = async () => {
    let params = {
        name: dialogData.base.id
    }
    await baseAPI.teacherBaseAPI.alt(dialogData.base.id, dialogData.base)
    // 筛选
    const te = await baseAPI.teacherExpendAPI.getAll(params)
    if (te.data.length == 0) {
        await baseAPI.teacherExpendAPI.add(dialogData.expend)
    } else {
        await baseAPI.teacherExpendAPI.alt(dialogData.expend.id, dialogData.expend)
    }
    dialogData.expend = dialogData.expendTem
    dialogData.base = dialogData.baseTem
    getAllData()
    formData.dialogView = false
    ElMessage({
        message: '数据修改成功！',
        type: 'success'
    })
}
const cancelData = () => {
    dialogData.base = dialogData.baseTem
    formData.dialogView = false
}
const setteacherbase = async () => {
    let params = {
        search: formData.sereach
    }
    const bases = await baseAPI.teacherBaseAPI.getAll(params)
    formData.tableData = bases.data
    // console.log(bases.data, 'base')
    // formData.tableData = formData.tableData.filter((res: any) => {
    //     return res.IDcard.includes(formData.sereach)
    // })
    formData.sereach = ''
}
// 三个按钮显示状态
const threeButton = reactive({
    base: true,
    expend: false,
    school: false,
    family: false
})

const showBase = () => {
    threeButton.base = true,
        threeButton.expend = false,
        threeButton.school = false,
        threeButton.family = false
}
const showExpend = () => {
    threeButton.base = false,
        threeButton.expend = true,
        threeButton.school = false,
        threeButton.family = false
}
const showFamily = () => {
    threeButton.base = false,
        threeButton.expend = false,
        threeButton.school = false,
        threeButton.family = true
}
const showSchool = () => {
    threeButton.base = false,
        threeButton.expend = false,
        threeButton.school = true,
        threeButton.family = false
}
// 获取所有数据
const getAllData = async () => {
    const res = await baseAPI.teacherBaseAPI.getAll()
    formData.tableData = res.data
    ElMessage({
        message: '数据加载成功！',
        type: 'success'
    })
}
getAllData()
const getAllNtion = async () => {
    const res = await baseAPI.natinsAPI.getAll()
    dialogData.nationOptions = res.data.map((item: any) => {
        return { label: `${item.nation_code}-${item.nation}`, value: item.id }
    })
}
getAllNtion()
const getallPolitical = async () => {
    const res = await baseAPI.politicalClimateAPI.getAll()
    dialogData.politicalOptions = res.data.map((item: any) => {
        return { label: item.political_climate, value: item.id }
    })
}
getallPolitical()
</script>
<template>
    <div class="title">教师信息管理</div>
    <div class="nav">
        <div>
            <el-input v-model="formData.sereach" style="max-width: 600px" placeholder="请输入身份证信息"
                class="input-with-select">
                <template #prepend>
                    <el-button>搜索教师信息</el-button>
                </template>
                <template #append>
                    <el-button :icon="Search" @click="setteacherbase" />
                </template>
            </el-input>
        </div>
        <div>
            <el-button :icon="Refresh" @click="getAllData" />
        </div>
        <div>
            <el-button type="success" round @click="addItem">新增</el-button>
            <el-button type="info" round
                @click="uploaddialog.changeopen('教职工及拓展信息', 'teacher/tcbases/importTcBase/', '导入教职工及拓展信息')">导入</el-button>
        </div>
    </div>
    <!-- 表格数据显示 -->
    <div>
        <el-table :data="formData.tableData" stripe style="width: 100%" height="660" border>
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="55" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="sex" label="性别" width="55" />
            <el-table-column prop="birthday" label="出生日期" width="120" />
            <el-table-column prop="IDcard" label="身份证" width="180" />
            <el-table-column prop="nation" label="民族" width="70" />
            <el-table-column prop="political_climate" label="政治面貌" width="100" />
            <el-table-column prop="address" label="家庭地址" />
            <el-table-column fixed="right" label="操作" width="130">
                <template #default="scope">
                    <el-button :icon="More" size="small" circle />
                    <el-button type="primary" :icon="Edit" size="small" circle @click="editItem(scope.row)" />
                    <el-button type="danger" :icon="Delete" size="small" circle @click="delItem(scope.row)" />
                </template>
            </el-table-column>
            <template #empty>
                <div style="text-align: center; padding: 20px;color: red;">
                    没有找到数据
                </div>
            </template>
        </el-table>
    </div>
    <!-- 分页 -->
    <!-- <div class="set-page">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div> -->
    <!-- 添加、编辑 -->
    <el-dialog v-model="formData.dialogView" title="教师个人明细信息" width="80%" center>
        <span>
            <div class="button-nav">
                <el-button type="success" round @click="showBase">教师基本信息</el-button>
                <el-button type="info" round @click="showExpend">教师拓展信息</el-button>
                <el-button type="primary" round @click="showSchool">教师学校信息</el-button>
                <el-button type="danger" round @click="showFamily">教师家庭信息</el-button>
            </div>
            <div>
                <!-- 教师基本信息 -->
                <div v-if="threeButton.base" class="base-align">
                    <el-form :model="dialogData.base" :inline="true" label-width="auto" style="max-width: 600px">
                        <el-form-item label="姓名">
                            <el-input v-model="dialogData.base.name" :suffix-icon="Edit" />
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="dialogData.base.sex">
                                <el-radio :value=true>男</el-radio>
                                <el-radio :value=false>女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="出生日期">
                            <el-date-picker v-model="dialogData.base.birthday" type="date" placeholder="请选择日期"
                                style="width: 190px;" value-format="YYYY-MM-DD" />
                        </el-form-item>
                        <el-form-item label="身份证">
                            <el-input v-model="dialogData.base.IDcard" :suffix-icon="Edit" style="width: 190px;" />
                        </el-form-item>
                        <el-form-item label="民族">
                            <el-select v-model="dialogData.base.nation" placeholder="请选择民族" style="width: 190px;">
                                <el-option v-for="item in dialogData.nationOptions" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="政治面貌">
                            <el-select v-model="dialogData.base.political_climate" placeholder="请选择政治面貌"
                                style="width: 190px;">
                                <el-option v-for="item in dialogData.politicalOptions" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="dialogData.base.address" :suffix-icon="Edit" style="width:480px" />
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 教师拓展信息 -->
                <div v-if="threeButton.expend" class="base-align">
                    <el-form label-width="auto" :inline="true" :model="dialogData.expend" style="max-width: 600px">
                        <el-form-item label="姓名">
                            <el-input v-model="dialogData.base.name" disabled />
                        </el-form-item>
                        <el-form-item label="参工日期">
                            <el-date-picker v-model="dialogData.expend.participate_date" type="date" placeholder="请选择日期"
                                value-format="YYYY-MM-DD" style="width: 150px;" />
                        </el-form-item>
                        <el-form-item label="籍贯">
                            <el-input v-model="dialogData.expend.hometown" />
                        </el-form-item>
                        <el-form-item label="认定出生日期">
                            <el-date-picker v-model="dialogData.expend.recogntion_date" type="date" placeholder="请选择日期"
                                value-format="YYYY-MM-DD" style="width: 150px;" />
                        </el-form-item>
                        <el-form-item label="在职类型">
                            <el-select v-model="dialogData.expend.employment_type" placeholder="请选择类型"
                                style="width: 190px;">
                                <el-option v-for="item in dialogData.employmentOptions" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 教师学校信息 -->
                <div v-if="threeButton.school">教师学校信息</div>
                <!-- 教师家庭信息 -->
                <div v-if="threeButton.family">教师家庭信息</div>
            </div>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelData">取消</el-button>
                <el-button type="primary" @click="addData" v-if="formData.showAddEdit">
                    新增
                </el-button>
                <el-button type="primary" @click="editData" v-if="!formData.showAddEdit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 导入数据 -->
    <UploadModel></UploadModel>
</template>
<style scoped>
.title {
    background-color: #fff;
    height: 40px;
    text-align: center;
    font-size: 25px;
    border: #1e1e1e;
}

.nav {
    margin: 10px 0;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}

.set-page {
    background-color: #fff;
    margin-top: 5px;
}

.button-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;

}

.base-align {
    margin-top: 15px;
    /* background-color: #d3d3d3; */
    display: flex;
    justify-content: center;
}
</style>